<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<!-- eslint-disable vue/no-deprecated-v-bind-sync -->
<template>
 <div>
  <div class="header-container">
      <!-- 左侧部分 -->
      <div class="left-section">
        <el-button class="menu-btn" text @click="drawer = true">
          <el-icon><Menu /></el-icon>
        </el-button>
        
        <div class="nav-links">
          <router-link to="/main" class="nav-item">我的课堂</router-link>
          <router-link to="/classContent" class="nav-item">课程内容</router-link>
          <router-link to="/homePage" class="nav-item">作业详情</router-link>
        </div>
      </div>

      <!-- 右侧部分 -->
<div class="right-section">
  <el-popover
    placement="bottom-end"
    :width="300"
    trigger="hover"
  >
    <template #reference>
      <el-icon class="bell-icon"><Bell /></el-icon>
    </template>
    
    <div class="notification-container">
      <div class="notification-tabs">
        <span class="tab-item active">全部</span>
        <span class="tab-item">教学活动</span>
        <span class="tab-item">教务通知</span>
        <span class="tab-item">系统通知</span>
      </div>
      <div class="notification-actions">
        <span class="action-item">
          <el-icon><Check /></el-icon>
          一键标为已读
        </span>
        <span class="action-item">查看全部</span>
      </div>
    </div>
  </el-popover>
  <el-dropdown trigger="hover">
    <el-avatar :size="32" class="user-avatar" :src="require('@/assets/homePage/26.png')" />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <router-link to="/vip" class="dropdown-link">
            <el-icon><Star /></el-icon>
            开通VIP
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/auth" class="dropdown-link">
            <el-icon><Key /></el-icon>
            机构用户认证
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/userSetting" class="dropdown-link">
            <el-icon><Setting /></el-icon>
            个人设置
          </router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/login" class="dropdown-link">
            <el-icon><SwitchButton /></el-icon>
            退出账户
          </router-link>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</div>

      <!-- 抽屉菜单 -->
      <el-drawer v-model="drawer" direction="ltr" size="240">
        <template #header>
          <div class="drawer-header">
            <img src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" height="24">
          </div>
        </template>
        <el-menu>
          <el-menu-item v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
            {{ item.name }}
          </el-menu-item>
        </el-menu>
      </el-drawer>
    </div>
    <div style="margin-top: 20px;">
      <div class="cmps-homework-review">
    <el-tabs v-model="activeNav">
       <el-tab-pane label="详情" name="first" class="view-homework-detail">
         <Work :workId="workId"></Work>  <!-- 注意这里的 prop 名称 -->
       </el-tab-pane>
       <el-tab-pane v-if="userType!=0" label="批阅" name="second">
       <!-- workId 存在或为 0 时都显示 -->
         <ReadWork  :workId="workId"></ReadWork>
       </el-tab-pane>
       <el-tab-pane v-if="userType==0" label="提交作业" name="second">
        <Submit :workId="workId"></Submit>
       </el-tab-pane>
    </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup> 
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import Work from './WorkComment.vue'
import ReadWork from './ReadWork.vue'
import { Bell, Menu, Check, Setting, SwitchButton, Star, Key } from '@element-plus/icons-vue'
import Storage from '@/utils/storage'
import Submit from './SubmitPage.vue'

const route = useRoute()
const workId = computed(() => route.params.id)
const activeNav = ref('first')
const drawer = ref(false)
const userType = Storage.getSession("userType");
// const getUserType = () => {
  
// }
const menus = ref([
  { name: '我的课堂', route: '/main' },
  { name: '课程内容', route: '/course' },
  { name: '作业详情', route: '/homePage' }
])

// eslint-disable-next-line no-unused-vars
const toNav = (route) => {
  // 处理导航逻辑
} 

// 添加调试代码
console.log('路由参数：', route.params)
console.log('workId:', workId.value) 
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 28px;
  box-shadow: 0 1px 10px 0 #dfdfdf;
  background: #fff;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-btn {
  padding: 0;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

.nav-item:hover {
  color: #409EFF;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-avatar {
  cursor: pointer;
}

.drawer-header {
  padding: 0 20px;
}

.bell-icon {
  font-size: 20px;
  cursor: pointer;
  color: #606266;
}

.notification-container {
  padding: 10px 0;
}

.notification-tabs {
  display: flex;
  border-bottom: 1px solid #EBEEF5;
  padding: 0 6px;
}

.tab-item {
  padding: 8px 8px;
  font-size: 14px;
  cursor: pointer;
  color: #606266;
}

.tab-item.active {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

.notification-actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  color: #409EFF;
  font-size: 14px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #606266;
  font-size: 14px;
}

.dropdown-link:hover {
  color: #409EFF;
}

.el-dropdown-menu__item {
  padding: 8px 16px;
  line-height: 1.5;
}

:deep(.el-dropdown-menu) {
  padding: 4px 0;
}

:deep(.el-dropdown-menu__item i) {
  font-size: 16px;
}


</style>
